<template>
  <view class="pay">

    <custom-nav-bar title="支付订单" showBack></custom-nav-bar>

    <view class="pay-header">
      <view class="remain-pay-time">支付剩余时间 {{ time }}</view>
      <view class="amount">
        <text class="amount1">￥</text>
        <text class="amount2">{{ orderData.orderAmount }}</text>
      </view>
      <view class="order-number">订单号：{{ orderData.orderNumber }}</view>
    </view>
    <view class="pay-method">
      <label class="radio-list">
        <view class="radio-left">
          <image class="img" src="/static/icons/weixin-pay.png" mode="aspectFill"></image>
          <text class="text">
            {{ payMethod[0].name }}
          </text>
        </view>
        <view>
          <radio :value="payMethod[0].name" :checked="true" color="#e74747" />
        </view>
      </label>
    </view>
    <view class="to-pay">
      <view class="pay-btn">立即支付</view>
      <view class="bottom-save-area" :style="{ height: `${bottomSafeArea()}px` }"></view>
    </view>
  </view>
</template>

<script setup>
import { computed, onUnmounted, ref } from 'vue'
import { useTimePay } from '../../stores/timePay';
import { bottomSafeArea } from '../../utils/system';
import { useSubmitData } from '../../stores/submitData';

const timePay = useTimePay();

// 提交订单数据
const submitData = useSubmitData();

const orderData = ref(submitData.submitData)

const payMethod = ref([
  {
    id: 1,
    name: '微信支付'
  }
])




// 剩余支付时间
const time = ref('14:59')

let timer = null;
timer = setInterval(() => {
  const currentTime = timePay.time + 15 * 60000 - +new Date();
  // console.log(currentTime);
  const m = String(Math.floor(currentTime / 60000)).padStart(2, '0');
  // const s = Math.floor((currentTime % 60000) / 1000);
  const s = String(Math.floor((currentTime % 60000) / 1000)).padStart(2, '0');
  if (currentTime > 0) time.value = `${m}:${s}`;
  else timer = null
}, 1000);


// 在离开支付订单页面后，跳转到订单详情页面
onUnmounted(() => {
  clearInterval(timer)
  uni.navigateTo({
    url: '/pages/orders/orders'
  })
})

</script>
<style scoped lang="scss">
.pay {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  // justify-content: c;
  align-items: center;


  .pay-header {
    // background-color: red;
    margin-top: 100rpx;
    padding: 30rpx;


    .remain-pay-time,
    .order-number {
      padding: 20rpx 0;
      text-align: center;
      color: #999;
      font-size: 30rpx;
    }

    .amount {
      text-align: center;
      font-size: 60rpx;
      font-weight: bold;

      .amount1 {
        font-size: 4dvh;
      }
    }


  }

  .pay-method {
    background-color: #fff;
    margin-top: 50rpx;
    padding: 30rpx;
    width: 90%;
    box-sizing: border-box;
    border-radius: 30rpx;


    .radio-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;


      .radio-left {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .img {
          width: 55rpx;
          height: 55rpx;
        }

        .text {
          font-size: 30rpx;
        }
      }
    }
  }

  .to-pay {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .pay-btn {
      width: 90%;
      background-color: #e74747;
      color: white;
      height: 90rpx;
      border: none;
      border-radius: 90rpx;
      // margin-top: 10px;
      text-align: center;
      line-height: 90rpx;
      font-size: 38rpx;
    }
  }
}
</style>
<style></style>
